@layout("/common/_container.html"){
<style>
    .checkboxStyle {
        display: inline-block;
        width: 15px;
        height: 15px;
        background: #DCDCDC;
        border: 1px solid #535353;
        border-radius: 5px;
        vertical-align: middle
    }
    .checkboxClass {
        opacity: 0;
        cursor: pointer;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    .labelStyle{
        font-weight: 500;
        margin-left: 10px;
    }
    #checkboxBox > div{
        padding: 0;
    }
    .selection{
        background:#289bd6;
    }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div style="display: none">
            <input type="hidden" id="listManagementValuezw" value="${listManagement.listm1}">
            <input type="hidden" id="listManagementValueyw" value="${listManagement.listm2}">
            <input type="hidden" id="menuNameValue" value="${menuName}">
            <input type="hidden" id="userNameValue" value="${userName}">
            <input type="hidden" id="listEchoValue" value="${listEcho.listx1}">
        </div>
        <div class="wrap">
            <div id="checkboxBox" class="clearfix"></div>
            <div>
                <button type="button" class="btn" id="screenSubmission">提交</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var list = $("#listManagementValuezw").val().split("，");
        var list2 = $("#listManagementValueyw").val().split("，");
        var listEcho = $("#listEchoValue").val().split("，");

        for (var i = 0; i < list.length; i++) {
            var checkbox = '<div class="col-sm-2"><span for="click_'+list[i]+'" class="checkboxStyle"><input class="checkboxClass" type="checkbox" value="'+list2[i]+'" name="about" id="click_'+list[i]+'"></span><label for="click_'+list[i]+'" class="labelStyle">'+list[i]+'</label></div>';
            $("#checkboxBox").append(checkbox);
        }

        if(listEcho != ""){
            $.each(listEcho, function(key, value) {
                $("input[name='about'][value='"+value+"']").attr("checked", true).parent().addClass('selection');
            });
        }

        $("#checkboxBox").on('click', '.checkboxStyle', function () {
            if($(this).hasClass('selection')){
                $(this).removeClass('selection');
            }else {
                $(this).addClass('selection');
            }
        });
        $("#screenSubmission").click(function () {
            var menuName = $("#menuNameValue").val();
            var userName = $("#userNameValue").val()
            var listVal = "";
            $.each($('input:checkbox'), function () {
                if (this.checked) {
                    listVal += $(this).val() + "，";
                }
            });
            $.ajax({
                url: Feng.ctxPath + "/reservation/reservation_updateTable",
                type: "post",
                data: {
                    listx1: listVal,
                    menuName:menuName,
                    userName:userName
                },
                success: function (data) {
                    Feng.success('添加成功!');
                    window.parent.location.reload();
                },
                error: function (data) {
                    alert("添加失败")
                }
            })
        })
    })
</script>
@}
